<template>
  <base-modal :width="modAlProps.width" :buttons="buttons" :isVisible="props.isVisible" :title="modAlProps.title"
    @handleOk="buttonMessage" @handleCancle="handleCancle" class="site_modal">
    <template v-slot:body>
      <div>
        <a-form name="advanced_search" autoComplete="off"
          :class="formState.password.value ? 'repassword-form' : 'password-form'" :model="formState" ref="passwordFrom">
          <!-- <template
            v-for="(section, section_index) in formState"
            :key="section_index"
          > -->
          <!-- <a-form-item :label="section.label" :rules="section.rule">
              <a-input-password
                placeholder="请输入"
                v-model:value="section.value"
                ref="password1"
                :name="section.param"
                allow-clear
              />
            </a-form-item> -->
          <a-form-item class="password-item" :name="['password', 'value']" :label="formState.oldPassword.label"
            :rules="[formState.oldPassword.rule]">
            <a-input-password placeholder="请输入" v-model:value="formState.oldPassword.value" ref="password1" allow-clear />
          </a-form-item>
          <a-form-item class="password-item" :name="['password', 'value']" :label="formState.password.label"
            :rules="[formState.password.rule]">
            <a-input-password placeholder="请输入" v-model:value="formState.password.value" ref="password1" allow-clear />
          </a-form-item>
          <a-form-item class="password-item" :name="['repeatePassword', 'value']" :label="formState.repeatePassword.label"
            :rules="[formState.repeatePassword.rule]" v-if="formState.password.value">
            <a-input-password placeholder="请输入" v-model:value="formState.repeatePassword.value" allow-clear />
          </a-form-item>
          <!-- </template> -->
        </a-form>
      </div>
    </template>
  </base-modal>
</template>
<script lang="ts" setup>
import { ref, reactive, nextTick, onMounted, defineComponent, watch } from "vue";
import baseModal from "@/components/modal/baseModal.vue";
import { dataSourceType, detailDataItemType } from "@/type";
import request from "@/api/index";
import { Modal, message } from "ant-design-vue";
import { encrypt3DES, decrypt3DES } from "@/utils/cryptojs";

const passwordFrom = ref<any>("passwordFrom");
//interface
interface Options {
  [propName: string | number]: any;
}
const props = defineProps({
  isVisible: {
    type: Boolean,
    default: false,
  },
});

//data
//模态框数据
const modAlProps = reactive<Options>({
  width: "M",
  title: "修改密码",
});
//模态框button按钮个数和文案修改
const buttons = ref<dataSourceType[]>([
  {
    text: "保存",
    "html-type": "submit",
    keepAlive: true,
  },
]);
const validatepasssure = (_rule: dataSourceType = {}, value: any) => {
  if (value === "") {
    return Promise.reject(`重复密码不能为空！`);
  } else if (value !== formState.password.value) {
    return Promise.reject(`两次输入密码不一致！`);
  } else {
    return Promise.resolve();
  }
};
const validatePass = async (_rule: dataSourceType = {}, value: any) => {
  if (value === "") {
    return Promise.reject(`登录密码不可为空！`);
  } else {
    let data = await request.fetchMemberPasswordCheck({
      password: encrypt3DES(value),
    });
    if (data.message == "操作成功") {
      return Promise.resolve();
    } else {
      return Promise.reject(`${data.message}`);
    }
  }
};
const formState = reactive<dataSourceType>({
  oldPassword: {
    value: "",
    rule: {
      required: false,
    },
    label: "当前密码",
  },
  password: {
    value: "",
    rule: {
      required: true,
      validator: validatePass,
      trigger: ["blur"],
      msg1: "登录密码不可为空！",
      msg2: "登录密码错误！",
      // api: "fetchSensitiveWordTableUnique",
      params: {},
    },
    label: "新密码",
  },
  repeatePassword: {
    value: "",
    rule: {
      required: true,
      validator: validatepasssure,
      trigger: ["blur"],
      msg1: "登录密码不可为空！",
      msg2: "登录密码错误！",
      // api: "fetchSensitiveWordTableUnique",
      params: {},
    },
    label: "确认新密码",
  },
});

const channelId = ref<number | string>();

// 移动调取接口
const buttonMessage = async (msg: dataSourceType) => {
  passwordFrom.value
    .validate()
    .then(() => {
      let params = {
        oldPassword: encrypt3DES(formState.oldPassword.value),
        password: encrypt3DES(formState.password.value),
        repeatePassword: encrypt3DES(formState.repeatePassword.value),
      };
      request
        .fetchPasswordChange(params)
        .then((res: any) => {
          if (res.code == "00000 00000") {
            handleOk();
            message.success(res.message);
          } else {
            message.error(res.message);
          }
        })
        .catch((err: any) => {
          throw new Error(err);
        });
    })
    .catch(() => { });
};
const emits = defineEmits(["handleOk", "handleCancle"]);
const handleOk = () => {
  emits("handleOk");
};

const handleCancle = (e: MouseEvent) => {
  emits("handleCancle", e);
};
</script>

<style lang="less" scoped>
::v-deep(.repassword-form .ant-form-item-label) {
  width: 95px;
}

::v-deep(.password-form .ant-form-item-label) {
  width: 70px;
}

::v-deep(.atree) {
  margin-left: 80px;
}

.ant-form-item:last-child {
  margin-bottom: 0;
}

.openorclose {
  margin-left: 80px !important;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-left: 16px;
  font-size: 14px;
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: #1f6ded;

  .iconfont {
    margin-left: 5px;
  }
}
</style>
